Trello Clone

In this challenge, you'll be adding “drag-and-drop” functionality to create a Trello-like UI:

Trello’s drag-and-drop implementation is deceptively complex. To make this challenge a bit less impossible, you don't have to worry about dropping the card between other cards. Notice in the GIF above, the dropped card is always added to the end of the column.

Difficulty

This question feels like another step up in difficulty to me. The state required for this sort of problem is quite complex, and it's so easy to get lost / overwhelmed.

I don't think this problem requires anything beyond what we've covered in the course. It's comparable to an extra-hard exercise from the course.

Rules

You're not allowed to use any drag-and-drop libraries.
You can access the internet to google anything else you'd like, including ways to implement drag and drop from scratch.
You can use immer, it has been pre-installed in this playground.
You don't have to worry about touchscreen support for this challenge.

Playground

Code Playground

import React from 'react';

function App() {

return (

<main>

<header>Upcoming</header>

<button className="card">File taxes</button>

</div>

</section>

<header>Finished</header>

Buy Amina's birthday present

</button>

Schedule haircut

</button>

</div>

</section>

</main>

);

}

export default App;

My attempt

Clarification: In this video, I mention that I decided to add immer as a dependency, and that unfortunately you can't add dependencies. This playground, however, does come with immer installed.

I record these attempts before I've really figured out what the dependencies will be, since I'm solving the problem for the first time. Sorry for any confusion!

Attempt code (success)

import React from 'react';
import { produce } from 'immer';

function App() {
  const [columns, setColumns] = React.useState([
    {
      name: 'Upcoming',
      columnId: 'column-a',
      cards: [
        {
          id: 'a',
          label: 'Buy cat food',
        },
        {
          id: 'b',
          label: 'File taxes',
        },
      ],
    },
    {
      name: 'Finished',
      columnId: 'column-b',
      cards: [
        {
          id: 'c',
          label: 'Buy Amina’s birthday present',
        },
        {
          id: 'd',
          label: 'Schedule haircut',
        },
      ],
    },
  ]);
  const [draggingId, setDraggingId] = React.useState(null);

  function handleStartDrag(id) {
    setDraggingId(id);
  }

  function handleHoverOverColumn(hoveringOverColumnIndex) {
    if (!draggingId) {
      return;
    }

    const { columnId: hoveringOverColumnId } =
      columns[hoveringOverColumnIndex];

    const draggingFromColumnIndex = columns.findIndex(
      (column) =>
        column.cards.some((card) => card.id === draggingId)
    );

    const draggingFromColumnId =
      columns[draggingFromColumnIndex].columnId;

    if (draggingFromColumnId === hoveringOverColumnId) {
      return;
    }

    const cardIndex = columns[
      draggingFromColumnIndex
    ].cards.findIndex((card) => card.id === draggingId);

    const card =
      columns[draggingFromColumnIndex].cards[cardIndex];

    setColumns(
      produce(columns, (draftColumns) => {
        draftColumns[draggingFromColumnIndex].cards.splice(
          cardIndex,
          1
        );

        draftColumns[hoveringOverColumnIndex].cards.push(
          card
        );
      })
    );
  }

  return (
    <main>
      {columns.map(
        ({ name, columnId, cards }, columnIndex) => (
          <section
            key={columnId}
            className="column"
            onMouseEnter={() =>
              handleHoverOverColumn(columnIndex)
            }
            onMouseUp={() => {
              setDraggingId(null);
            }}
          >
            <header>{name}</header>
            <div className="cards">
              {cards.map(({ id, label }) => {
                const isDraggingThisCard = id === draggingId;
                return (
                  <button
                    onMouseDown={() => handleStartDrag(id)}
                    key={id}
                    className="card"
                    style={{
                      opacity: isDraggingThisCard ? 0.5 : 1,
                    }}
                  >
                    {label}
                  </button>
                );
              })}
            </div>
          </section>
        )
      )}
    </main>
  );
}

export default App;